<template>
  <div>
      <header>
          <div class="title">
              DiskMan 磁盘管理
          </div>
          <div class="header_content">通过LuCl管理磁盘</div>
      </header>
      <div class="content">
          <el-button type="primary" size="default">重新扫描磁盘</el-button>
      </div>
      <div class="content">
          <div class="content_title">
              磁盘
          </div>
          <div class="content_data">
              <el-table :data="diskData" stripe>
                  <el-table-column 
                      prop="list"
                      label="目录">
                  </el-table-column>
                  <el-table-column 
                      prop="model"
                      label="型号">
                  </el-table-column>
                  <el-table-column 
                      prop="number"
                      label="序列号">
                  </el-table-column>
                  <el-table-column 
                      prop="size"
                      label="文件大小">
                  </el-table-column>
                  <el-table-column 
                      prop="temperature"
                      label="温度">
                  </el-table-column>
                  <el-table-column 
                      prop="areaList"
                      label="分区表">
                  </el-table-column>
                  <el-table-column 
                      prop="SATA"
                      label="SATA版本">
                  </el-table-column>
                  <el-table-column 
                      prop="health"
                      label="健康">
                  </el-table-column>
                  <el-table-column 
                      prop="state"
                      label="状态">
                      <template slot-scope="scope" class="state">
                          <span>{{scope.row.state}}</span>
                      </template>
                  </el-table-column>
                    <el-table-column 
                      prop=""
                      label="">
                      <template>
                          <el-button type="primary" size="small">修改状态</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              
          </div>
      </div>
      <div class="content">
          <div class="content_title">挂载点</div>
          <div>
              <el-table :data="guazaidian" stripe>
                  <el-table-column
                      prop="equipment"
                      label="设备" align="center">
                  </el-table-column>
                  <el-table-column
                      prop="dataSystem"
                      label="文件系统" align="center">
                  </el-table-column>
                  <el-table-column
                      prop="option"
                      label="挂在选项" align="center">
                  </el-table-column>
                  <el-table-column
                      prop="address"
                      label="挂载点" align="center">
                  </el-table-column>
                  <el-table-column
                      label="挂载" align="center">
                      <template>
                          <div>
                              <el-button type="danger" size="default">卸载</el-button>
                              
                          </div>
                      </template>
                  </el-table-column>
              </el-table>
              
          </div>
          <div class="inputBox">
              <el-select  value-key="" placeholder="--请选择--" clearable filterable size="small">
              </el-select>
              <el-select  value-key="" placeholder="auto" clearable filterable size="small">
              </el-select>
              <el-input  placeholder="" size="small" clearable style="width:200px"></el-input>
              <el-input  placeholder="" size="small" clearable style="width:200px"></el-input>
              <el-button type="primary" size="small">挂载</el-button>
          </div>
      </div>
      <div class="content">
          <div class="content_title">创建</div>
          <el-button type="primary" size="default">Btrfs</el-button>
          <div class="inputBox">
              <div class="boxItem">
                  <span>Btrfs卷标</span>
                  <el-input  placeholder="" size="normal" clearable></el-input>
              </div>
              <div class="boxItem">
                  <span>Btrfs Raid 级别</span>
                  <el-input  placeholder="" size="normal" clearable></el-input>
              </div>
              <div class="boxItem">
                  <span>Btrfs整列成员</span>
                  <el-input  placeholder="" size="normal" clearable></el-input>
              </div>
              <el-button type="primary" size="default">创建BTRFS</el-button>
              
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            diskData:[
                {
                    list:'/dev/sda',
                    model:'VBOX HARDDISK',
                    number:'VBeb7a6202-6cde3c82',
                    size:'1.00GB',
                    temperature:'-',
                    areaList:'MBR',
                    SATA:'-',
                    health:'-',
                    state:'ACTIVE'
                }
            ],
            guazaidian:[
                {
                    equipment:'/dev/root',
                    dataSystem:'squashfs',
                    option:'ro,relatime',
                    address:'/rom',
                }
            ]
        }
    }
}
</script>

<style scoped lang="less">
header{
    font-size: 24px;
    .title{
        color: #000;
        margin-bottom: 20px;
    }
    .header_content{
        color: #999;
        font-size: 13px;
    }
}
.content{
    box-shadow: 0 0 10px #DEE1E6;
    margin: 30px 0;
    padding: 20px;
    .content_title{
        font-size: 14px;
        margin-left: 5px;
    }
    .inputBox{
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        .boxItem{
            display: flex;
            
            font-size: 12px;
            span{
                display: inline-block;
                width: 120px;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
.button_box{
    display: flex;
    justify-content: flex-end;
}
</style>